<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind的新增特点</title>
    <script src="../public/vue_3.2.36.js"></script>
  </head>
  <body>
    <div id="app">
        <span :id="hh">绑定一个值</span>
        <hr>
        <!-- 动态绑定多个值：通过不带参数的 v-bind，你可以将它们绑定到单个元素上 -->
      <span v-bind="objectOfAttrs">hello</span>
    </div>

    <script>
      const { createApp, ref } = Vue;
      const objectOfAttrs = {
        id: "container",
        class: "wrapper",
      };
      const hh = ref("main");
      const app = createApp({
        setup() {
          return { hh,objectOfAttrs };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
